<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="" alt="">
        <input type="button" id="full" value="全屏">
        <input type="button" id="canvelFull" value="退出全屏">
        <input type="button" ID="isFull" value="是否全屏">
    </div>
    <script>
        //    全屏操作的主要方法和属性
        /*requestFullScreen():全屏开启显示
        cancelFullScreen():退出全屏 只能使用document来实现*/
        /*不同的浏览器加不同的前缀
          chrome:webkit
          firefox:moz
          ie:ms
          opera:o
        */

        window.onload = function() {
                var div = document.querySelector("div");
                // 添加三个按钮的事件
                // 全屏操作
                document.querySelector("#full").onclick = function() {
                    if (div.requestFullscreen) {
                        div.requestFullscreen();
                    } else if (div.webkitRequestFullScreen) {
                        div.webkitRequestFullScreen();
                    } else if (div.mozRequestFullScreen) {
                        div.mozRequestFullScreen()
                    } else if (div.msRequestFullScreen) {
                        (div.msRequestFullScreen();
                        }

                    }

                    // 退出全屏
                    document.querySelector("#canvelFull").onclick = function() {
                            if (document.cancelFullScreen) {
                                document.cancelFullScreen();
                            } else if (document.webkitCancelFullScreen) {
                                document.webkitCancelFullScreen();
                            } else if (document.mozCancelFullScreen) {
                                document.mozcancelFullScreen();
                            } else if (document.msCalcelFullScreen) {
                                document.msCalcelFullScreen();
                            }
                        }
                        // 是否全屏
                    document.querySelector("#isFull").onclick = function() {
                        if (document.fullscreenElement || document.webkitFullscreenELement || document.mozFullScreenElement || doucment.msFullscreenElement) {
                            alert(true);
                        } else {
                            alert(false);
                        }


                    }
                }
    </script>
</body>

</html>